<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>ECharts · About</title>

<link rel="shortcut icon" href="./asset/ico/favicon.png">

<link href="./asset/css/font-awesome.min.css" rel="stylesheet">
<link href="./asset/css/bootstrap.css" rel="stylesheet">
<link href="./asset/css/carousel.css" rel="stylesheet">
<link href="./asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
/* Main marketing message and sign up button */
.img-circle {
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px;
	margin: 5px;
}

.container p {
	margin-top: 30px;
}

h2 a {
	font-size: 22px;
}
</style>
</head>

<body>
	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation"
		id="head"></div>

	<div class="container">
		<div class="row">
			<h2>ORIGIN</h2>
			<img class="pull-right" src="asset/img/about/zrender1.png"
				style="margin-left: 20px;">
			<p>
				ECharts (a contraction of Enterprise Charts) is a commercial
				charting solution originally intended to address the report need of
				the <abbr title="Baidu">Company's</abbr> various business systems,
				such as Baidu Promotion (凤巢), Advertising Manager (广告管家). Previously
				we used Flash to fulfill those needs, but the problem is, due to
				Baidu's highly clear-cut division of labor, there is a special team
				in charge of Flash. As a result, everything – from the design of
				data interface to personalized needs - has to be negotiated and
				agreed upon, leaving little room for front-end engineers to control
				completely. Moreover, there is no Flash common to all the scenes in
				a system. Worse still, Steve Jobs, the co-founder and then CEO of
				Apple Inc., insisted that Apple wouldn't allow Flash on the iPhone,
				iPod touch and iPad. For all these reasons, and given the soaring
				popularity of html5, we decided to try something else. Therefore in
				early 2012 <a href="http://weibo.com/kenerlinfeng" target="_blank">Lin
					Feng (Kener)</a>, the then front-end technical director of Baidu
				Promotion, tried to make charts via Canvas in the Data Platform
				Project of Baidu Promotion. He wrote a whole new lightweight Canvas
				library ZRender, which is actually the prototype of ECharts, albeit
				miles from the one in front of you now.
			</p>
			<p>
				<a href="http://weibo.com/errorrik" target="_blank">Erik</a>,
				Baidu's senior front-end developer, built the team of Baidu business
				front-end general technology right after his return. Against the
				above backdrop, and with the firm support of the front-end team
				manager <a href="http://weibo.com/forain" target="_blank">Zu
					Ming</a>, data visualization became an important field of general
				technology studies. So it's only natural that Lin Feng switched his
				role and began to head the Baidu business front-end data
				visualization team, which comprises the foremost front-line software
				engineers including <a href="http://weibo.com/pissang"
					target="_blank">Shen Yi</a> (tech genius obsessed with web3d), <a
					href="http://weibo.com/wind108369" target="_blank">Yang Ji</a>
				(graphic maniac), <a href="http://weibo.com/u/2113446991"
					target="_blank">Su Shuang </a>(who has hands-on experience of SVG /
				GUI) and Chen Huaimu (who knows color inside out).
			</p>

			<p>As mentioned above, ECharts is based on ZRender. Back then
				ZRender had charting features, and we already managed to add the
				Drag-Recalculate option. Nevertheless, the coupling of various
				graphic data logic and image rendering, non-modularity, and the
				arbitrary customized demos made us realize that it was by no means a
				decent design. Therefore, for the first time we made a large-scale
				ZRender reconstruction, cutting out all its charting features and
				making it a pure Canvas library under the hood.</p>
			<img class="pull-left" src="asset/img/about/echarts1.png"
				style="margin-right: 10px;">
			<p>The chart logic from ZRender was then made into the
				fundamental framework for ECharts Version 0.1, which, to be honest,
				was still a demo, for the interface was not standardized, and both
				customization and universality were terrible. Erik, Lin Feng, and
				three senior engineers from the Flash team (FYI, it was they or
				their team who made almost all the Flash charts in the Baidu
				business system over the years) opened six meetings in nearly two
				months before the final approval and release of ECharts Standard
				Version 1.0. The standard was defined in pursuit of rational design
				and high customizability, regardless of implementation costs. So it
				was like the team was digging itself a bottomless pit. For the
				ensuing ten months, the team found itself climbing out of the pit
				step by step.</p>
			<p>Lucky for us, we finally made it. On June 30, 2013, ECharts
				Version 1.0 was launched. And the standard became the API reference
				of ECharts 1.0 when richer interactivity were added. Its importance
				is unquestionable despite the fact that it is now only a part of the
				ECharts documentation. Today when we look back, we sincerely thank
				the five extraordinary engineers - Lin Feng, Zhao Shu, Erik, Liu
				Yang, Yang Dong - for setting the spectacular standard. They
				convinced us that compared with implementation costs, a reasonable
				interface design is far more important.</p>
		</div>

		<div class="row featurette">
			<h2>DEVELOPMENT</h2>
			<p>
				It all started as a response to Baidu's own business needs, yet the
				real opportunity for the way ahead lies in open source. Though there
				has been innumerable JS charting libraries in China, ECharts, with
				its revolutionary new functionality and technology, has taken the
				industry by storm right after its release. Commonly lauded as a "<a
					href="http://www.itongji.cn/article/0P525392013.html"
					target="_blank">rising star</a>" of China's data visualization, it
				was featured by mainstream technical media such as CSDN, ITEye,
				InfoQ, iTongji as well as COS. In particular, OSChina did a
				week-long ECharts promotion on its home page, with the post being
				bookmarked for over 1,000 times. What's more, just 18 months after
				its release on GitHub, ECharts was starred for more than 5,000
				times, which means that it has become the most-watched Chinese open
				source project around the globe. ECharts is also the first Chinese
				project which selected into <a
					href="https://github.com/showcases/data-visualization"
					target="_blank">Github Explorer Data Visualization</a>. Today,
				hundreds of companies - ranging over a variety of fields including
				media, finance, e-commerce, tourism, hotels, weather, geography,
				video games, and electric power - trust ECharts Solution when it
				comes to enterprise-grade charting.
			</p>
			<p>
				We are so very flattered that, just 6 months after its release,
				ECharts made it to "<a
					href="http://www.oschina.net/news/47438/2013-top-10-hot-projects-in-china"
					target="_blank">The Ten Hottest Domestic Open Source Projects
					of the Year</a>" and took the lead in "<a
					href="http://www.oschina.net/news/47468/2013-top-20-newest-opensource-projects"
					target="_blank">The Twenty Hottest New Open Source Software of
					the Year</a>". In addition, we never dreamed that ECharts would get so
				many attentions from other domains or countries: expansions of
				multiple domestic and international versions appeared on RtypeL;
				it's said that there are two financial consulting firms in the
				Asia-Pacific region developing ECharts-based BI products, and that
				someone even pushed ECharts further into the Mayor's Office of Data
				Analytics, City of New York. We are now full of unexpected delight
				and we'd like to thank every single ECharts enthusiast for his/her
				continuing support.
			</p>
			<div id="main" style="height: 300px;"></div>
		</div>

		<div class="row featurette team">
			<h2>TEAM</h2>
			<p>The ECharts team is a bunch of distinct, diligent, dynamic
				people - who have different skills and hail from all corners of
				companies - on an extraordinary mission to make your data sing. Come
				check out the faces that make up Team ECharts.</p>

			<h2>Research & Development</h2>
			<div class="row">
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/linfeng.jpg">
					<h2>
						<a href="http://weibo.com/kenerlinfeng" target="_blank">Lin
							Feng</a>
					</h2>
					<p>Senior Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/shenyi.jpg">
					<h2>
						<a href="http://weibo.com/pissang" target="_blank">Shen Yi</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/erik.jpg">
					<h2>
						<a href="http://weibo.com/errorrik" target="_blank">Dong Rui</a>
					</h2>
					<p>Senior Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/sushuang.jpg">
					<h2>
						<a href="http://weibo.com/u/2113446991" target="_blank">Su
							Shuang</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/denghongqi.jpg">
					<h2>
						<a href="http://weibo.com/u/2810393271" target="_blank">Deng
							Hongqi</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/yangji.jpg">
					<h2>
						<a href="http://weibo.com/wind108369" target="_blank">Yang Ji</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/loutongbing.jpg">
					<h2>
						<a href="http://weibo.com/loutongbing" target="_blank">Lou
							Tongbing</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
			</div>

			<h2>Product | Design</h2>
			<div class="row">
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/zuming.jpg">
					<h2>
						<a href="http://weibo.com/forain" target="_blank">Zu Ming</a>
					</h2>
					<p>Baidu business Front-End Team Manager</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/huangyue.jpg">
					<h2>
						<a href="http://weibo.com/u/1823030471" target="_blank">Huang
							Yue</a>
					</h2>
					<p>Interaction Designer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/wangjunting.jpg">
					<h2>
						<a href="http://weibo.com/u/1237163505" target="_blank">Wang
							Junting</a>
					</h2>
					<p>Interaction Designer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/huyao.jpg">
					<h2>
						<a href="http://weibo.com/p/1005051742233685" target="_blank">Hu
							Yao</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<!--div class="col-md-2 text-center">
              <img class="img-circle" src="asset/img/about/zhangyanru.jpg">
              <h2><a href="#" target="_blank">Zhang Yanru</a></h2>
              <p>Interaction Designer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
              <img class="img-circle" src="asset/img/about/yandong.jpg">
              <h2><a href="http://weibo.com/ShiMiTu2007" target="_blank">颜东</a></h2>
              <p>视觉中国设计总监</p>
            </div-->
			</div>

			<h2>Expert Advisors</h2>
			<div class="row">
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/chenwei.jpg">
					<h2>
						<a href="http://weibo.com/shearwarp" target="_blank">Chen Wei</a>
					</h2>
					<p>Professor at Zhejiang University</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/huangzhimin.jpg">
					<h2>
						<a href="http://weibo.com/u/2006785117" target="_blank">Huang
							Zhimin</a>
					</h2>
					<p>CTO of Caixin Media</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/lizhan.jpg">
					<h2>
						<a href="http://weibo.com/u/2042635201" target="_blank">Li
							Zhan</a>
					</h2>
					<p>
						Director of Baidu <abbr title="Composite Search">CS</abbr>
						Department
					</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/shenhao.jpg">
					<h2>
						<a href="http://weibo.com/shenhaolaoshi" target="_blank">Shen
							Hao</a>
					</h2>
					<p>
						Professor at <abbr title="Communication University of China">CUC</abbr>
					</p>
				</div>
			</div>

			<h2>Avid Aficionados</h2>
			<div class="row" style="margin-bottom: 0;">
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/zhouyang.jpg">
					<h2>
						<a href="http://weibo.com/zhouyummy" target="_blank">Zhou Yang</a>
					</h2>
					<p>
						Data Analyst<br />
						<abbr title="ECharts package in R">recharts</abbr> author
					</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/weitaiyun.jpg">
					<h2>
						<a href="http://weibo.com/taiyun" target="_blank">Wei Taiyun</a>
					</h2>
					<p>
						Secretary-General of Capital of Statistics<br />
						<abbr title="ECharts package in R">recharts</abbr> author
					</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/yaofeifei.jpg">
					<h2>
						<a href="http://weibo.com/645008221" target="_blank">Yao
							Feifei</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/tanhe.jpg">
					<h2>
						<a href="http://weibo.com/fengmengxia" target="_blank">Tan He</a>
					</h2>
					<p>
						Master of <abbr title="Communication University of China">CUC</abbr><br />Data
						Visualization Team at the <abbr
							title="Communication University of China">CUC</abbr>
					</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/xieshiwei.jpg">
					<h2>
						<a href="https://github.com/i6ma" target="_blank">Xie Shiwei</a>
					</h2>
					<p>Front-End Engineer at Baidu</p>
				</div>
				<div class="col-md-2 text-center">
					<img class="img-circle" src="asset/img/about/jaroslav.benc.jpg">
					<h2>
						<a href="https://twitter.com/DatamaticIO" target="_blank">Jaroslav
							Benc</a>
					</h2>
					<p>R&amp;D Software Engineer at Aviarc New Zealand</p>
				</div>
			</div>
		</div>
		<!-- Jumbotron -->
		<div class="jumbotron">
			<h1>JOIN US!</h1>
			<p class="lead">We know you are passionate and adventurous...so
				don't hesitate, do it now!</p>
			<a class="btn btn-large btn-warning"
				href="mailto:echarts(a)baidu.com"><i
				class="glyphicon glyphicon-envelope"></i> Contact Us &raquo;</a>
		</div>
	</div>
	<!-- /container -->

	<footer id="footer"></footer>
	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="./asset/js/jquery.min.js"></script>
	<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
	<script src="./asset/js/bootstrap.min.js"></script>
	<script src="example/www/js/echarts.js"></script>
	<script type="text/javascript">
        require.config({
            paths: {
                echarts: 'example/www/js'
            }
        });
        require(
            [
                'echarts',
                'example/theme/infographic',
                'echarts/chart/line'
            ],
            function(ec, theme) {
                myChart = ec.init(document.getElementById('main'), theme);
                myChart.setOption({
                    title : {
                        text: 'Github Stars',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer:{type:'none'},
                        showDelay: 0
                    },
                    grid:{x:45,x2:20,y:40,y2:50},
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            axisLabel: {
                                interval:0,
                                formatter:function(v){
                                    switch(v) {
                                        case '2013年6月':
                                            return '6\n2013';
                                        case '2014年1月':
                                            return '1\n2014';
                                        case '2015年1月':
                                            return '1\n2015';
                                        default:
                                            return v.substr(5).replace('月','');
                                    }
                                }
                            },
                            data : [
                                '2013年6月','2013年7月','2013年8月','2013年9月','2013年10月',
                                '2013年11月','2013年12月','2014年1月','2014年2月','2014年3月',
                                '2014年4月','2014年5月','2014年6月','2014年7月','2014年8月',
                                '2014年9月','2014年10月','2014年11月','2014年12月','2015年1月',
                                '2015年3月', '2015年4月', '2015年5月'
                            ]
                        }
                    ],
                    yAxis : [
                        {
                            type: 'value',
                            splitNumber: 7,
                            min: 0
                        }
                    ],
                    series : [{
                        name:'echarts',
                        type:'line',
                        smooth: true,
                        itemStyle:{normal:{color:'#E87C25'}},
                        data:[
                          {value:0,itemStyle:{normal:{label:{show:true,formatter:'1.0.0'}}}},
                          {value:90,itemStyle:{normal:{label:{show:true,formatter:'1.1.0'}}}},
                          {value:316,itemStyle:{normal:{label:{show:true,formatter:'1.1.1'}}}},
                          {value:480,itemStyle:{normal:{label:{show:true,formatter:'1.2.0'}}}},
                          {value:620,itemStyle:{normal:{label:{show:true,formatter:'1.2.1'}}}},
                          {value:743,itemStyle:{normal:{label:{show:true,formatter:'1.3.0'}}}},
                          {value:904,itemStyle:{normal:{label:{show:true,formatter:'1.3.5'}}}},
                          {value:1090,itemStyle:{normal:{label:{show:true,formatter:'1.3.6'}}}},
                          {value:1262,itemStyle:{normal:{label:{show:true,formatter:'1.3.7'}}}},
                          {value:1368,itemStyle:{normal:{label:{show:true,formatter:'1.3.8'}}}},
                          {value:1610,itemStyle:{normal:{label:{show:true,formatter:'1.4.0'}}}},
                          {value:1767,itemStyle:{normal:{label:{show:true,formatter:'1.4.1'}}}},
                          {value:1928,itemStyle:{normal:{label:{show:true,formatter:'2.0.0'}}}},
                          {value:2390,itemStyle:{normal:{label:{show:true,formatter:'2.0.1'}}}},
                          {value:2610,itemStyle:{normal:{label:{show:true,formatter:'2.0.2'}}}},
                          {value:2740,itemStyle:{normal:{label:{show:true,formatter:'2.0.3'}}}},
                          {value:2930,itemStyle:{normal:{label:{show:true,formatter:'2.0.4'}}}},
                          {value:3210,itemStyle:{normal:{label:{show:true,formatter:'2.1.8'}}}},
                          {value:3610,itemStyle:{normal:{label:{show:true,formatter:'2.1.9'}}}},
                          {value:5600,itemStyle:{normal:{label:{show:true,formatter:'2.2.0'}}}},
                          {value:6200,itemStyle:{normal:{label:{show:true,formatter:'2.2.1'}}}},
                          {value:6600,itemStyle:{normal:{label:{show:true,formatter:'2.2.2'}}}},
                          {value:6949,itemStyle:{normal:{label:{show:true,formatter:'2.2.3'}}}}
                        ]
                    }]
                });
                window.onresize = myChart.resize;
            }
        );

    </script>
</body>
</html>
